<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/util.js"></script>
    <script>
        window.onload = function (){
            findStudent(1);
        }

        /**
         * 动态条件查询学生
         * @param pageNO 页码
         */
        function findStudent(pageNO){
            axios.get("/student/findByItem",{
                params:{
                    pageNO,
                    name:$("name").value,
                    startGrade:$("startGrade").value,
                    endGrade:$("endGrade").value
                }
            }).then(e =>{
                var info = e.data;
                var str = "";
                for(var i=0;i<info.list.length;i++){
                    var obj = info.list[i];
                    str += `<tr><td>${obj.name}</td><td>${obj.phone}</td>
                    <td>${obj.grade}</td><td>${obj.classBean.name}</td>
                    <td><a href="javascript:del(${obj.id})">删除</a>
                    <a href="/html/update.html?id=${obj.id}">修改</a></td></tr>`;
                }
                $("studentData").innerHTML = str;

                var cutStr = "";
                for(var i=1;i<=info.pages;i++){
                    cutStr += `<a style="margin-left: 5px"
                            href="javascript:findStudent(${i})">${i}</a>`;
                }
                $("cutPageDiv").innerHTML = cutStr;
            });
        }

        function del(id){
            axios.get("/student/del",{
                params:{id}
            }).then(e =>{
                if(e.data == "ok"){
                    findStudent(1);
                }
            });
        }
    </script>
</head>
<body>
    <table border="1" width="60%">
        <thead><tr><th>姓名</th><th>电话</th>
            <th>成绩</th><th>班级</th><th>操作</th></tr></thead>
        <tbody id="studentData"></tbody>
    </table>
    <div id="cutPageDiv"></div>
    姓名：<input type="text" id="name"><br>
    起始成绩：<input type="text" id="startGrade"><br>
    结束成绩：<input type="text" id="endGrade"><br>
    <input type="button" value="查询" onclick="findStudent(1)">
<br>
    <a href="/html/add.html">添加</a>
</body>
</html>